<template>
	<div class="chart-pane-bar">
		<!-- tops -->
		<div id="barsimple"></div>
	</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
export default{
	name:'Barsimple',
	data(){
		return {
			msg:''
		}
	},
	computed: {
        name(){
            return this.$route.path
        }
    },
    mounted(){
    	var that = this;
    	that.getbarsimple();
    },
	methods:{
		getbarsimple(){
			var data=[258,300,336,397,435];
			var yMax = 500;
			var dataShadow = [];
			for (var i = 0; i < data.length; i++) {
			    dataShadow.push(yMax);
			}

			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('barsimple'));
			// 绘制图表
			myChart.setOption({
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01],
			        // 控制网格线是否显示
		            splitLine: {
		                show: false
		            },
			        //  改变x轴颜色
		            axisLine:{
		                lineStyle:{
		                    color:'#0e7992',
		                }
		            },
			    },
			    yAxis: {
			        type: 'category',
                    data: ['科大国盾','科大讯飞','大陆马牌','美的暖通','格力电器'],
			        //  改变y轴颜色
		            axisLine:{
		                lineStyle:{
		                    color:'#0e7992',
		                }
		            },
			    },
			    series: [
			        {
			            type: 'bar',
			            data:data,
			            itemStyle: {
			            	normal:{
			            		color:'#0c81fe'
			            	}
			            }
			        }
			    ],
			    label:{
			    	borderColor:'#ff0000'
			    },
			    textStyle:{
			    	color:'#ffffff'
			    }

			});
		}
	}
}
</script>
<style>
#barsimple{
	width:100%;
	height: 500px;
}
</style>